<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="nav">
        <button>视频</button>
        <button>直播</button>
    </div>

    <div class="content">

    </div>

    <script>
        //定义个路由表
        var routes = [
            { path: '/video', component: video_page },
            { path: '/play', component: play_page },
        ]
        //给多个标签绑定事件
        var btns = [...document.querySelectorAll('button')];
        btns.forEach((item, index) => {
            item.onclick = function (e) {
                e.preventDefault();
                //调用history.pushState() 添加一个新的历史记录( 同时实现路由地址的切换 )
                history.pushState({}, '', routes[index].path)
                routes[index].component();
            }
        })

        //渲染视频的列表
        function video_page() {
            document.querySelector('.content').innerHTML = `<ul>
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
            <li>恋情曝光，李小璐带小鲜肉路旁摆拍</li>
            <li>被老外退货的8位明星，宁静惨遭家暴</li>
        </ul>`;
        }
        //渲染直播的列表
        function play_page() {
            document.querySelector('.content').innerHTML = `
            <ul>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
            <li>直播 | 全球快递"云监工"</li>
            <li>直播 | 立冬拥抱暖阳</li>
        </ul>`;
        }
    </script>
</body>

</html>